<style >
    ul { list-style: none;}

    #hover-cap-4col .thumbnail {
        position:relative;
        overflow:hidden;	
    }
    .caption {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0,0,0,0.4);
        width: 100%;
        height: 100%;
        color:#fff !important;
    }

</style>
<div class="service">
    <h3>Service</h3>
    <div class="bor hidden-xs"></div>
    <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-6">
                <ul class="thumbnails" id="hover-cap-4col">
                    <!--<li class="col-md-3">-->
                    <div class="thumbnail">
            <div class="caption">
                <h4>Caption Title</h4>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt.</p>
                <p><a href="#" class="btn btn-inverse" rel="tooltip" title="Preview"><i class="glyphicon glyphicon-eye-open"></i></a> 
                    <a href="#" rel="tooltip" title="Visit Website" class="btn btn-inverse"><i class="glyphicon glyphicon-share"></i></a>
                </p>
            </div>
                <div class="service-item animated">
            <span >
                    <!--thẻ i dưới này là tấm hình màu xanh-->
                    <i class="icon-gamepad green"></i>
        
            </span></div>
    </div>
                    <h4><a href="#" data-toggle="modal" data-target="#largeModal">Malorum perspiciatis</a></h4>
                    <p>At vero eos et accusamus et iusto odio dignissimos qui blanditiis praesentium itate none.</p>
</div>
</div>
<script >
    $(document).ready(function() {

        $("[rel='tooltip']").tooltip();

        $('#hover-cap-4col .thumbnail').hover(
                function() {
                    $(this).find('.caption').slideDown(250); //.fadeIn(250)
                },
                function() {
                    $(this).find('.caption').slideUp(250); //.fadeOut(205)
                }
        );

    });
</script>

